<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="Shift_JIS"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
<script language="javascript" type="text/javascript" src="../../lib/railties/prototype.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/logger.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/prototype_ext.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/menu.js"></script>
</head>
<body>

<div id="menuBar1" style="background-color:#FFFFFF;border: 1px solid #BBBBBB;"></div>

<script language="javascript" type="text/javascript"><!--

Logger.setActiveOnLoad(true);

Menu.Item.DefaultOptions.havingItemsHtml = '<img src="./black_left_triangle.png"/>';
Menu.DefaultOptions.itemHavingItemsHtml = '<img src="./black_left_triangle.png"/>';

var menu = new Menu( $("menuBar1"), [
    {text:"main menu", link: "http://www.google.co.jp"  },
    {text:"sub1", items:[
        {text:"sub1-1", items:[
            {text:"sub1-1-1", link:"http://www.yahoo.co.jp" },
            {text:"sub1-1-2", link:"http://www.msn.co.jp" },
            {text:"sub1-1-3", link:"http://www.goo.co.jp" }
        ]},
        {text:"sub1-2", items:[
            {text:"sub1-2-1", link:"http://mixi.jp" },
            {text:"sub1-2-2", link:"http://hatena.ne.jp/" }
        ]}
    ]},
    {text:"ruby", items:[
        {text:"ruby", items:[
            {text:"Ruby official site", link:"http://www.ruby-lang.org/ja/" },
            {text:"オブジェクト指向スクリプト言語 Ruby リファレンスマニュアル", 
                link:"http://www.ruby-lang.org/ja/man/?cmd=view;name=Ruby%A5%EA%A5%D5%A5%A1%A5%EC%A5%F3%A5%B9%A5%DE%A5%CB%A5%E5%A5%A2%A5%EB" },
            {text:"るびま", link:"http://jp.rubyist.net/magazine/" },
            {text:"blogs", items:[
                {text:"Matzにっき", link:"http://www.rubyist.net/~matz/" }
            ]}
        ]},
        {text:"rails", items:[
            {text:"Ruby on Rails official site", link:"http://www.rubyonrails.org/" },
            {text:"rails wiki", link:"http://wiki.fdiary.net/rails/" },
            {text:"blogs", items:[
                {text:"Rails weblog", link:"http://weblog.rubyonrails.org/" }
            ]}
        ]},
        {text:"action sample", action: function(){alert("customized action");}, shortcut:{ctrl:true, key: Event.KEY_X } },
        {text:"go to home", action: function(){alert("go to home");}, shortcut:{alt:true, key: Event.KEY_HOME } },
        {text:"help", action: function(){alert("show help");}, shortcut:{ctrl:true, key: Event.KEY_F1 } }
    ]}
]);

new Menu.KeyHandler(menu);

//--></script>

[Ctrl+Alt]でメニューが有効になり、キーでメニューを操作できます。
<br/><input type="text" value="" size="40"/>
<br/><select>
    <option value="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
    <option value="1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
    <option value="1">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCcc</option>
</select>

</body>
</html>
